<template>
	<div class="line_chart" :id="idName">折线图</div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, toRefs, computed, onMounted, watch } from "vue";
import {
  paramsFun,
  $fullUrl,
  $toTime,
  $banseUrl,
  $check_action,
  $getUrlParams,
} from "@/utils/utils.js";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
let router = useRouter();
const emit = defineEmits(["changeTab"]);
const props = defineProps({
	idName: {
		type: String,
		default: "lineChart"
	},
	title: {
		type: String,
		default: "XXX折线图"
	},
	vm: {
		type: Object,
		default: function() {
			return {
				xAxis: "xAxis",
				names: "names",
				values: "values",
			};
		},
	},
	timeout:{
		type: Number,
		default: 2000
	},
	color:{
		type: Array,
		default:[]
	}
});
let { idName, title, vm,timeout,color } = toRefs(props);
let option=ref({
	title: {
		text: "XXX折线图",
		left: "center",
	},
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		type: 'scroll',
		orient: 'horizontal',
		y: 'bottom'
	},
	grid: {
		left: "3%",
		right: "10%",
		bottom: "14%",
		containLabel: true,
	},
	toolbox: {
		feature: {
			saveAsImage: {},
		},
	},
	xAxis: [{
		type: 'category',
		boundaryGap: false,
		data: []
	}],
	yAxis: [{
		type: 'value'
	}],
	series: [
		// {
		// 	name: 'Forest',
		// 	type: 'bar',
		// 	barGap: 0,
		// 	emphasis: {
		// 		focus: 'series'
		// 	},
		// 	data: [320, 332, 301, 334, 390]
		// },
					]
})
const series = computed(() => {
	let list = vm.value.names;
	let values = vm.value.values;
	let seriesobj = [];
	for (let i=0;i<list.length;i++){
		let data = []
		for (let j=0;j<values.length;j++){
			data.push(values[j][i]);
		}
		let dict_type = {
				name: list[i],
				type: 'line',
				data: data
		}
		seriesobj.push(dict_type);
	}

	return seriesobj;
});
let init_chart = () => {
	let optionObj = option.value;

	let titleObj = title.value;
	if (titleObj) {
		optionObj.title.text = titleObj;
	}

	let seriesobj = series.value;
	optionObj.series = seriesobj;

	let xAxis = optionObj.xAxis[0];
	xAxis.data = vm.value.xAxis;

	if (xAxis.data.length>4){
		optionObj.axisLabel= {
            interval: 0, //使x轴文字显示全
            formatter: function (params) {
              let newParamsName = '';
              const paramsNameNumber = params.length; // 文字总长度
              const provideNumber = 4; //一行显示几个字
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  const start = p * provideNumber;
                  const end = start + provideNumber;
                  const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          }
        }

	let myChart = echarts.init(document.getElementById(idName.value));
	myChart.setOption(optionObj);
};
watch(series, (newValue, oldValue) => {
  if (newValue) {
    init_chart();
  }
});
onMounted(() => {
	if(color.value.length > 0){
		option.value.color = color.value
	}
	setTimeout(()=>{
			init_chart();
	},200)

});



</script>
